import { colors } from "@/constants/colors";
import { Feather } from "@expo/vector-icons";
import { Tabs } from "expo-router";
import { useColorScheme } from "nativewind";

export default function HomeLayout() {
    const {colorScheme} = useColorScheme()
    return (
        <>
            <Tabs screenOptions={{
                headerShown: false,
                tabBarActiveTintColor: colors.seaGreen,
                tabBarStyle: {
                    height: 52,
                    backgroundColor: colorScheme === 'dark' ? colors.black : colors.white,
                    borderTopWidth: 0,
                    elevation: 0
                }
            }}>
                <Tabs.Screen
                    name='index'
                    options={{
                        title: 'Home',
                        tabBarIcon: ({ color }) => <Feather name="home" size={28} color={color} />,
                        tabBarLabelStyle: {
                            width: '100%',
                            fontSize: 12,
                        },
                        tabBarShowLabel: false
                    }}
                />
                <Tabs.Screen
                    name='search'
                    options={{
                        title: 'Buscar',
                        tabBarIcon: ({ color }) => <Feather name="search" size={28} color={color} />,
                        tabBarLabelStyle: {
                            width: '100%',
                            fontSize: 12,
                        },
                        tabBarShowLabel: false
                    }}
                />
            </Tabs>
        </>
    )
}